<template>
  <div class="page">
    <div class="containerInner">
      <div class="wrapper">
        <div class="header">
          <div class="group">
            <img
                class="iconUser"
                src="../assets/img/img_0.png"
            />
            <span class="chime">Pistachio</span>
          </div>
          <!--          导航栏提取-->
          <Navigation></Navigation>
          <!--          登陆注册栏提取-->
          <LoginBar class="login-bar"></LoginBar>
        </div>
        <div class="search">
<!--          <el-input placeholder="搜索单曲、歌手" v-model="content" class="input-with-select">-->
<!--            <el-button slot="append" icon="el-icon-search"></el-button>-->
<!--          </el-input>-->
          <SearchBar></SearchBar>
        </div>
        <div class="body">
          <div class="front">

            <div class="face">
              <img src="../assets/img/rc2.png">
            </div>
            <div class="commons">
              <span>Personality label：</span>
              <span>烦恼？呵~这个问题对仙人毫无意义，没有什么烦恼能够存在千年。</span>
            </div>
            <el-divider></el-divider>
            <div class="userInfo">
              <div class="commons">
                <span>Nick name：</span>
                <span>Desdemona</span>
              </div>
              <el-divider></el-divider>
              <div class="commons">
                <span>Gender：</span>
                <span>Female</span>
              </div>
              <el-divider></el-divider>
              <div class="commons">
                <span>Telephone：</span>
                <span>1 414 692-89-00</span>
              </div>
              <el-divider></el-divider>
            </div>
            <el-row>
              <el-button type="danger" @click="logout">Sign out</el-button>
              <el-button type="info">Modify information</el-button>
            </el-row>


          </div>


        </div>

      </div>
    </div>
  </div>
</template>
<script>
import Navigation from "@/components/Navigation";
import LoginBar from "@/components/LoginBar";
import SearchBar from "@/components/SearchBar";


export default {
  components: {
    Navigation,
    LoginBar,
    SearchBar,

  },
  data() {
    return {
      content: '',
      search: ''
    }
  },
  methods: {
    logout() {
      this.$confirm('This operation will exit the login status, continue?', 'Tips', {
        confirmButtonText: 'Yes',
        cancelButtonText: 'No',
        type: 'warning'
      }).then(() => {
        localStorage.removeItem("userName")
        this.$message({
          type: 'success',
          message: 'Logged out!'
        });
        // eslint-disable-next-line @typescript-eslint/no-this-alias
        let that = this
        setTimeout(function () {
          that.$router.push("/login")
        }, 500);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: 'cancel'
        });
      });
    }
  },


}
</script>

<style src="./css/Individual.css" scoped/>
;
